﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section  styles{
    <style>
     .layui-form-label{
         width:100px;
     }
     .layui-input-block{
         margin-left: 130px;
     }
    </style>
}
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" lay-filter="config-form" style="padding: 15px 0 0 0;">
            <input type="hidden" name="Id" value="@Model.Id" />
            <input type="hidden" name="RelatedIdentity" value="@Model.RelatedIdentity" />
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">
                    字段名称
                </label>
                <div class="layui-input-block">
                    <input type="text" name="AttributeName" lay-verify="required" placeholder="请输入字段名称" autocomplete="off" class="layui-input" value="@Model.AttributeName" maxlength="20" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">
                    显示名称
                </label>
                <div class="layui-input-block">
                    <input type="text" name="DisplayName" lay-verify="required" placeholder="请输入显示名称" autocomplete="off" class="layui-input" value="@Model.DisplayName" maxlength="20" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    提示信息
                </label>
                <div class="layui-input-block">
                    <input type="text" name="HelpText" placeholder="请输入提示信息" autocomplete="off" class="layui-input" value="@Model.HelpText" maxlength="30" />
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md3">
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-required">
                            排序
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="Taxis" lay-verify="required" placeholder="请输入排序" autocomplete="off" class="layui-input" value="@Model.Taxis" maxlength="20" />
                        </div>
                    </div>
                </div>

                <div class="layui-col-md3">
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            默认值
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="DefaultValue" placeholder="请输入默认值" autocomplete="off" class="layui-input" value="@Model.DefaultValue" maxlength="20" />
                        </div>
                    </div>
                </div>

                <div class="layui-col-md3">
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-required">
                            表单提交类型
                        </label>
                        <div class="layui-input-block">
                            <select name="InputType" lay-verify="required" lay-filter="inputtype">
                                @if (ViewBag.InputTypeList != null)
                                {
                                    foreach (var item in ViewBag.InputTypeList)
                                    {
                                        <option value="@item.Name" @(item.Name==Model.InputType?"selected":"")>@item.Describe</option>
                                    }
                                }
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item attrheight" style="display:@ViewBag.IsExtendHeight">
                <div class="layui-form-label">高度</div>
                <div class="layui-input-block">
                    <input type="text" name="Height" placeholder="请输入高度" autocomplete="off" class="layui-input" value="@Model.Height" maxlength="20" />
                </div>
            </div>

            <div class="layui-form-item attrextend" style="display:@ViewBag.IsExtendAttr">
                <div class="layui-form-label">扩展数据 </div>
                <div class="layui-input-block">
                    <button type="button" class="pear-btn pear-btn-md" id="btnaddextend"><i class="icon pear-icon pear-icon-add"></i>添加数据</button>
                    <table class="layui-table" id="tabextend">
                        <colgroup>
                            <col width="200">
                            <col width="150">
                            <col width="150">
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>标题</th>
                                <th>值</th>
                                <th>默认值</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(ViewBag.ExtendsList!=null){
                                  foreach (var item in ViewBag.ExtendsList)
                                {
                                    <tr>
                                        <td><input type="text" name="txt" class="layui-input"  placeholder="请输入选项标题" value="@item["label"]" /></td>
                                        <td><input type="text" name="val" class="layui-input"  placeholder="请输入选项值" value="@item["value"]"  /></td>
                                        @if(Model.InputType == "CheckBox" || Model.InputType == "SelectMultiple"){
                                             <td><input type="checkbox" name="defextend"  title="默认勾选" @(item["selected"]=="1"?"checked":"") /></td>
                                        }
                                        else
                                        {
                                             <td><input type="radio" name="defextend"  lay-skin="primary" title="默认勾选" @(item["selected"]=="1"?"checked":"") /></td>
                                        }
                                        <td><button class="pear-btn pear-btn-xs pear-btn-danger del">删除</button></td>
                                       </tr>
                                    }
                            }

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-hide" lay-submit lay-filter="tablestyle-submit" id="tablestyle-submit">提交</button>
                </div>
            </div>
        </form>
    </div>
</div>


@section scripts{
<script>

    layui.use([ 'form', 'lscom'], function () {

        let form = layui.form;
        let $ = layui.jquery;

        let lscom = layui.lscom;

        var index = parent.layer.getFrameIndex(window.name);

        form.on('select(inputtype)', function(data) {
                var slval = data.value;
                extendhideshow(slval);
                
            });

            $('#btnaddextend').on('click',function(){
                var slval=$('select[name="InputType"]').val();
             if(slval=="CheckBox"  || slval=="SelectMultiple"){

                      addExtend(0);
                }else if(slval=="Radio" ||   slval=="SelectOne"){

                      addExtend(1);
                }
            })
           function  extendhideshow(slval){
                if(slval=="Text" || slval=="Number" || slval == "Date" || slval=="DateTime" ||  slval=="Image" || slval=="Video" || slval=="File" ){
                     $('.attrheight').hide();
                     $('.attrextend').hide();
                }else if(slval=="TextArea" || slval=="TextEditor" ){
                     $('.attrheight').show();
                     $('.attrextend').hide();
                }else if(slval=="CheckBox"  || slval=="SelectMultiple"){
                      $('.attrheight').hide();
                      $('.attrextend').show();
                     
                }else if(slval=="Radio" ||   slval=="SelectOne"){
                      $('.attrheight').hide();
                      $('.attrextend').show();
                }
           }
           function addExtend(tp){
             var tr ='<tr>'
             tr+='<td><input type="text" name="txt" class="layui-input"  placeholder="请输入选项标题" /></td>';
             tr+='<td><input type="text" name="val" class="layui-input"  placeholder="请输入选项值"  /></td>';
            if(tp==1){
                tr+='<td><input type="radio" name="defextend"  lay-skin="primary" title="默认勾选" /></td>';
            }
            else{
                 tr+='<td><input type="checkbox" name="defextend"  title="默认勾选" /></td>';
            }
            tr+='<td><button class="pear-btn pear-btn-xs pear-btn-danger del">删除</button></td>';
            $('#tabextend tbody').append(tr);

            form.render();
        }

        $(document).on('click','.del',function(){
          $(this).parents('tr').remove();
        })
        window.submitForm = function () {
            $("#tablestyle-submit").click();
        }

        form.on('submit(tablestyle-submit)', function (data) {
           var inputType= data.field.InputType ;
           var items=[];
           
            $('#tabextend tbody tr' ).each(function(){
                     var label= $(this).find('input[name="txt"]').val();
                     var value= $(this).find('input[name="val"]').val();
                     var selected= $(this).find('input[name="defextend"]').prop('checked')?1:0;
                     items.push({"label":label,"value":value,"selected":selected})
               });
            data.field.ItemValues=JSON.stringify(items);

            var field = data.field;
            var waitIndex = parent.layer.load(2);
            lscom.ajax({
                url: "/Cms/Tablestyle/SaveData",
                data: JSON.stringify(field),
                lsHandleError: false
            }).done(function (data) {
                if (data.code == 0) {
                    data.index = index;
                    let parentWindow = parent.selectedWindow().window;
                    parentWindow.saveCallback(data);
                }
            }).fail(function (message) {
                lscom.notify.error(message);
            }).always(function () {
                parent.layer.close(waitIndex);
            });

            return false;
        });
    });
</script>

}

